<template>
  <div class="leftTree">
    <el-tree
      :data="curveTreeShow"
      :props="defaultProps"
      show-checkbox
      node-key="resource_id"
      ref="tree"
      :check-strictly="true"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange">
    </el-tree>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1,
        defaultProps: {
          label: 'name'
        },
        checkedNumber: [],
        curveNeedPoint: [],
        testId: '',
        curveTreeShow: [],
        // 组织树
        curveTree: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: localStorage.getItem('num'),
          ids: ['']
        }
      }
    },
    created() {
      this.getCurveTree()
    },
    methods: {
      getCurveTree() {
        axios.post('/project', this.curveTree, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.curveTreeShow = []
          this.curveTreeShow.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      handleCheckChange(data, checked, indeterminate) {
        if (checked === true && this.checkedNumber.length < 5) {
          this.checkedNumber.push(data)
        } else if (checked === false) {
          this.checkedNumber.shift()
        } else if (checked === true && this.checkedNumber.length === 5) {
          checked = false
        }
        console.log(this.$refs.tree.getCheckedKeys())
        this.curveNeedPoint = this.$refs.tree.getCheckedKeys()
        this.$emit('testShowId', this.curveNeedPoint)
      },
      handleNodeClick(data) {
        this.testId = data.resource_id
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }])
        }
        if (node.level > 3) return resolve([])

        var hasChild
        if (node.data.name === 'region1') {
          hasChild = true
        } else if (node.data.name === 'region2') {
          hasChild = false
        } else {
          hasChild = Math.random() > 0.5
        }

        setTimeout(() => {
          var data
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }]
          } else {
            data = []
          }

          resolve(data)
        }, 200)
      }
    }
  }
</script>

<style>
  .leftTree {
    background-color: white;
    height: 790px;
    overflow: auto;
  }
</style>
